<template>
  <div class="chart_right2">
    <div class="chart_right2-title">编制结构</div>
    <div id="chart_right2" />
  </div>
</template>

<script>
const echarts = require('echarts')
import Sever from '@/api/selfApi'

export default {
  props: {
    dep_code: {
      type: String,
      default: '450000-00-0000',
      require: true
    }
  },

  data() {
    return {
      depcode: '450000-00-0000',
      option: {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '1%',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 0, name: '教育' },
              { value: 0, name: '卫生' },
              { value: 0, name: '农林牧水' },
              { value: 0, name: '其他' }
            ]
          }
        ]
      }
    }
  },

  watch: {
    dep_code(newValue, oldValue) {
      if (newValue) {
        ;(this.depcode = newValue), this.getBzjg()
      }
    }
  },
  destroyed() {
    window.onresize = null
  },
  mounted() {
    // this.getBzjg()
  },
  methods: {
    async getBzjg() {
      try {
        // 请求后台接口
        const res = await Sever.analyse.getBzjg({
          // 请求参数
          dep_code: this.depcode
        })
        if (res.length == 0) {
          // 初始化data中的数值
          Object.assign(this.$data, this.$options.data())
        } else {
          this.option.series[0].data[0].value = res[0][0]
          this.option.series[0].data[1].value = res[0][1]
          this.option.series[0].data[2].value = res[0][2]
          this.option.series[0].data[3].value = res[0][3]
        }
        this.drawPie()
      } catch (error) {
        console.log(error)
        Object.assign(this.$data, this.$options.data())
        this.drawPie()
      }
    },
    drawPie() {
      const myChartPiechart_right2 = echarts.init(
        document.getElementById('chart_right2')
      )
      myChartPiechart_right2.clear()

      myChartPiechart_right2.setOption(this.option)
      // -----------------------------------------------------------------
      // 响应式变化
      window.addEventListener(
        'resize',
        () => myChartPiechart_right2.resize(),
        false
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.chart_right2 {
  width: 100%;
  height: 32%;
  box-sizing: border-box;
  margin-bottom: 20px;
  background-color: rgba(255, 255, 255, 0.03);
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  display: flex;
  flex-direction: column;

  .chart_right2-title {
    font-weight: bold;
    height: 40px;
    display: flex;
    align-items: center;
    font-size: 18px;
    justify-content: center;
  }

  #chart_right2 {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

